<template>
  <PageWrapper>
    <n-card :bordered="false" size="small" class="proCard tabsCard">
      <n-tabs type="line" size="large">
        <n-tab-pane name="basic" tab="基本设置">
          <BasicSetting />
        </n-tab-pane>
        <n-tab-pane name="safety" tab="微信小程序设置">
          <SafetySetting />
        </n-tab-pane>
        <n-tab-pane name="push" tab="微信消息推送">
          <PushSetting />
        </n-tab-pane>
        <n-tab-pane name="gzh" tab="微信公众号设置">
          <GzhSetting />
        </n-tab-pane>
        <n-tab-pane name="alipay" tab="支付宝小程序设置">
          <AlipaySetting />
        </n-tab-pane>
        <n-tab-pane name="Image" tab="图片设置">
          <ImageSetting />
        </n-tab-pane>
        <n-tab-pane name="Cos" tab="COS配置">
          <CosSetting />
        </n-tab-pane>
        <n-tab-pane name="TencentSms" tab="腾讯云短信设置">
          <TencentSmsSetting />
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </PageWrapper>
</template>
  <script lang="ts" setup>
    import { PageWrapper } from '@/components/Page';
    import BasicSetting from './BasicSetting.vue';
    import SafetySetting from './SafetySetting.vue';
    import GzhSetting from './GzhSetting.vue';
    import AlipaySetting from './AlipaySetting.vue';
    import PushSetting from './PushSetting.vue';
    import ImageSetting from './ImageSetting.vue';
    import CosSetting from './CosSetting.vue';
    import TencentSmsSetting from './TencentSms.vue';
  </script>
  <style lang="less" scoped>
    .thing-cell {
      margin: 0 -16px 10px;
      padding: 5px 16px;
  
      &:hover {
        background: #f3f3f3;
        cursor: pointer;
      }
    }
  
    .thing-cell-on {
      background: #f0faff;
      color: #2d8cf0;
  
      :deep(.n-thing-main .n-thing-header .n-thing-header__title) {
        color: #2d8cf0;
      }
  
      &:hover {
        background: #f0faff;
      }
    }
  </style>
  